<template>
	<view class="box">
		<view class="card_head">
			<view class="icon" @click="brokershow = true">
				<u-image :showLoading="true" shape="circle" src="../../static/lease/phone.png" width="80rpx"
					height="80rpx"></u-image>
				<view class="">
					联系房东
				</view>
			</view>
			<view class="column">
				房东: {{userInfo.brokerName || '未录入'}}
			</view>
			<!-- 			<view class="column">
				性别: {{userInfo.tenantGender ? (userInfo.tenantGender == '0' ? '男' :'女') : '未识别'}}
			</view> -->
			<view class="column">
				电话: {{userInfo.brokerPhone}}
			</view>
		</view>
		<view class="module">
			<view class="row_title">
				租客信息
			</view>
			<view class="card">
				<view class="row">
					<view class="title">
						租客姓名
					</view>
					<view class="data">
						{{userInfo.tenantName}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						性别
					</view>
					<view class="data">
						{{userInfo.tenantGender}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						电话
					</view>
					<view class="data">
						{{userInfo.tenantPhone}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						租约确认状态
					</view>
					<view class="data">
						<u-tag text="未确认" plain size="mini" type="error" shape="circle"
							v-if="userInfo.leaseConfirmState == 0"></u-tag>
						<u-tag text="已确认" plain size="mini" type="success" shape="circle"
							v-if="userInfo.leaseConfirmState == 1"></u-tag>
						<u-tag text="已取消" plain size="mini" type="info" shape="circle"
							v-if="userInfo.leaseConfirmState == 2"></u-tag>
						<u-tag text="已拒绝" plain size="mini" type="warning" shape="circle"
							v-if="userInfo.leaseConfirmState == 3"></u-tag>
						<!-- {{userInfo.leaseConfirmState}} -->
					</view>
				</view>
				<view class="row">
					<view class="title">
						签约房源
					</view>
					<view class="data house_name">
						{{userInfo.houseRoomName}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						起止日期
					</view>
					<view class="data">
						{{userInfo.beginDate}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						终止日期
					</view>
					<view class="data">
						{{userInfo.endDate}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						入住人数
					</view>
					<view class="data">
						{{userInfo.peopleNumber}}人
					</view>
				</view>
				<view class="row">
					<view class="title">
						交租方式
					</view>
					<view class="data">
						{{userInfo.rentPayMode}}月一付
					</view>
				</view>
				<view class="row">
					<view class="title">
						收款信息
					</view>
					<view class="data">
						{{userInfo.lease}}
					</view>
				</view>
				<view class="collection">
					<view class="link">
						银行卡号: {{ userInfo.bankNo  }}
					</view>
					<view class="link">
						微信号: {{ userInfo.wechatNo }}
					</view>
					<view class="link">
						支付宝: {{ userInfo.alipayNo }}
					</view>
				</view>
				<view class="row">
					<view class="title">
						租金
					</view>
					<view class="data">
						{{userInfo.rent}}元/月
					</view>
				</view>
				<view class="row">
					<view class="title">
						房屋押金
					</view>
					<view class="data">
						{{userInfo.deposit}}元/月
					</view>
				</view>
				<view class="row">
					<view class="title">
						交租日
					</view>
					<view class="data">
						每月{{userInfo.rentDay}}号
					</view>
				</view>
				<view class="row">
					<view class="title">
						租约备注
					</view>
					<view class="data">
						{{userInfo.mark || '无备注'}}
					</view>
				</view>
			</view>
		</view>
		<template class="card" v-if="download_view && index == 0">
			<view class="" style="padding-left: 30rpx; box-sizing: border-box;">
				<view class="contract">
					<view style="margin-right: 20rpx;">
						纸质合同
					</view>
					<u-tag text="下载" plain size="mini" shape="circle" @click="download" v-if="userInfo.mediaList.length!=0"></u-tag>
				</view>
				<swiper :current="current" @change="handleChange" v-if="userInfo.mediaList.length==0">
					<swiper-item>
						<u--image :showLoading="true" src="../../../static/default/no_img.png" width="80px"
							height="100px" style="display: inline-block; margin-right: 10rpx;"></u--image>
					</swiper-item>
				</swiper>
				<swiper :current="current" @change="handleChange" v-if="userInfo.mediaList.length!=0">
					<swiper-item v-for="(item, index) of userInfo.mediaList" :key="index">
						<u--image :showLoading="true" :src="item ? item.mediaUrl :  '../../../static/default/404.png'"
							width="80px" height="100px" style="display: inline-block; margin-right: 10rpx;"
							@click="magnify(index)"></u--image>
					</swiper-item>
				</swiper>
			</view>
		</template>
		<view class="buttonBox" v-if="userInfo.leaseConfirmState == 0">
			<u-button type="primary" text="确认签约" @click="confirmLease($event,'confirm')"></u-button>

			<u-button type="error" text="拒绝签约" :customStyle="{'marginLeft': '30rpx'}"
				@click="confirmLease($event, 'refuse')"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="isConfirmIsShow" :title="title" @cancel="isConfirmIsShow = false" showCancelButton
			@confirm="handleConfirmLease(stateChangeDefault)" style="z-index: 88;"></u-modal>
		<u-popup :show="brokershow" mode="center" :round="10" @close="brokershow = false">
			<view class="popup">
				<view class="cue">
					拨打{{userInfo.brokerPhone}}
				</view>
				<view class="button_box">
					<u-button type="primary" class="sure" @tap="showDetermineToBroker">确定</u-button>
					<u-button @click="brokershow = false">取消</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		leaseDetail,
		updateStateLease
	} from "@/api/home/index.js"

	export default {
		data() {
			return {
				download_view: false,
				brokershow: false,
				isConfirmIsShow: false,
				stateChangeDefault:0,
				id: 0,
				index: 0,
				current: 0,
				userInfo: {},
				title: '确认签约？',
				list: [{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					},
					{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}, {
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}
				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}
		},
		onLoad(option) {
			this.id = option.id;
			// this.getLeaseDetail()
			setTimeout(() => {
				this.download_view = true
			}, 1000)
		},
		methods: {

			async getLeaseDetail() {
				const res = await leaseDetail(this.id);
				if (res.data.code == 200) {
					this.userInfo = res.data.data
				} else {
					this.$refs.uToast.show({
						message: '查看详情失败',
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)
					return
				}

			},
			confirmLease(e, type) {
				if (type == 'confirm') {
					this.title = '确认签约？'
					this.stateChangeDefault = 1
				} else {
					this.title = '拒绝租约？';
					this.stateChangeDefault = 3
				}
				this.isConfirmIsShow = true;

			},
			//签约确认
			async handleConfirmLease(state) {
				const res = await updateStateLease(this.id,state);
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					position: 'top',
					type: 'error'
				})
				this.$refs.uToast.show({
					message: res.data.msg,
					type: 'success'
				})
				this.isConfirmIsShow = false
				if(state == 1){
					console.log(res.data.data);
					if(res.data.data == -1){
						uni.navigateTo({
							url: '../agency/agency',
							animationType: this.animation.type,
							animationDuration: this.animation.time
						})
					}else{
						uni.navigateTo({
							url: '../orders/orderDetail?id=' + res.data.data,
							animationType: this.animation.type,
							animationDuration: this.animation.time
						})
					}
				}else{
					uni.navigateTo({
						url: '../agency/agency',
						animationType: this.animation.type,
						animationDuration: this.animation.time
					})
					
				}
				
			},
			//合同详情
			magnify(index) {
				uni.previewImage({
					urls: this.userInfo.mediaList.map(item => item.mediaUrl)
				});
			},
			handleChange(index) {
				this.current = index;
			},
			download() {
				if (this.userInfo.mediaList.length == 0) return this.$refs.uToast.show({
					message: '暂无文件',
					type: 'error'
				})
				var that = this
				that.userInfo.mediaList.map((item, index) => {
					uni.downloadFile({
						url: item.mediaUrl, // 需要下载的文件的网络地址
						success: function(res) {
							if (res.statusCode === 200) { // 确保请求成功
								// res.tempFilePath 是临时文件路径
								// 可以通过这个路径打开文件或者保存到本地指定位置
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function(saveRes) {
										// console.log('文件保存成功，存储路径为：', saveRes.savedFilePath);
										that.$refs.uToast.show({
											message: '文件已保存',
											type: 'success'
										})
									},
									fail: function(err) {
										// console.error('文件保存失败', err);
										that.$refs.uToast.show({
											message: '文件保存失败',
											type: 'error'
										})
									}
								});
							} else {
								// console.error('下载文件失败，状态码：', res.statusCode);
								that.$refs.uToast.show({
									message: '下载文件失败',
									type: 'error'
								})
							}
						},
						fail: function(err) {
							that.$refs.uToast.show({
								message: '下载文件失败',
								type: 'error'
							})
						}
					});
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.money {
		font-weight: bold;
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;
		font-size: 32rpx;
		padding-bottom: 10%;

		.card_head {
			padding: 30rpx;
			background-color: #fff;
			border-bottom: #dcdcdc solid 1rpx;

			.column {
				margin: 20rpx 0;
				width: 70%;
			}

			.icon {
				float: right;
				width: 30%;
				@include flexCenter;
				flex-direction: column;
			}

			.flexBetween {
				@include flexBetween;
			}

		}

		.back {
			background-color: #fff;
			@include flexBetween;
			padding: 20rpx;
		}

		.row {
			@include flexBetween;
			padding: 20rpx 0;
		}

		.collection {
			background-color: #f3f8fd;
			color: $noimportant;
			border-radius: 20rpx;
			padding: 20rpx;

			.link {
				line-height: 2;
			}
		}

		.title {
			color: $noimportant;
		}

		.row_title {
			font-weight: bold;
			padding: 30rpx;
		}

		.card {
			padding: 30rpx;
			background-color: #fff;
		}

		.data {
			display: flex;
			align-items: center;

			// text-align: right;
			// width: 60%;

		}

		.house_name {
			@include textOverflow;


		}

		.contract {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
		}

		.buttonBox {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			@include flexCenter;
			bottom: 0;
			position: fixed;
			box-sizing: border-box;
		}

	}

	.popup {
		padding: 30rpx;

		.cue {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
			padding: 40rpx;
		}

		.button_box {
			@include flexBetween;

			.sure {
				margin-right: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}
</style>